import React from 'react';
import {Link} from 'react-router';
import {observer} from 'mobx-react';
import Im from 'immutable';

import Store from './store.js';
import './index.less';

//component
import ReIcon from 'components/widgets/ReIcon';
import ReButton from 'components/widgets/ReButton';
import CountryCodeSelect from 'components/widgets/CountryCodeSelect';
import ReTextField from 'components/widgets/ReTextField';
import ReSelectField from 'components/widgets/ReSelectField';

@observer
export default class view extends React.Component {
    static propTypes = {
        //name: React.PropTypes.string,
    };

    static defaultProps = {};

    name = 'ModelsConfig';
    store = null;

    constructor(props, context) {

        super(props, context);

        this.name = props.name ? props.name : this.name;
        this.store = new Store({name: this.name});


    }

    componentWillMount() {
        this.store.will();
    }

    componentDidMount() {
        this.store.mount();
    }

    componentWillUnmount() {
        this.store.remove();
    }

    componentWillReact() {
        // console.log(arguments);
    }

// <CountryCodeSelect
// codeList={!!this.store.stores.Frame ? this.store.stores.Frame.countryCodeList
//     : this.store.stores.Exhibition.countryCodeList}
// currentSelect={detail.selectCountryCode}
// onChange={(item) => this.store.selectCodeItem(item, detail)}/>

    renderDialog() {
        // (1:定制馆,2:体验馆,3:艺术家馆,4:少儿馆,5:机构馆)
        let typeList = [{type: 2, text: '体验馆'}, {type: 4, text: '少儿馆'},
            {type: 3, text: '艺术家馆'}, {type: 5, text: '机构馆'}, {type: 1, text: '定制馆'}];
        return (
            <div className={this.store.visible ? 'config-mask fade-in' : 'config-mask fade-out'}
                 onClick={() => this.store.closeDialog()}>
                <div className="config-wrapper" onClick={(e) => e.stopPropagation()}>
                    <div className="config-header">
                        <span className="header-title">{'配置场馆'}</span>
                        <span className="header-close" onClick={() => this.store.closeDialog()}>
                            <ReIcon icon="window_closes" className="icon"/>
                        </span>
                    </div>
                    <div className="config-content">
                        <p className="config-item-text">配置类型</p>
                        <div className="type-list-wrapper">
                            {
                                typeList.map((item, index) => {
                                    let active = !!~this.store.typeList.indexOf(item.type);
                                    return (
                                        <div key={index} className="type-item">
                                                    <span onClick={() => this.store.typeSelect(item.type)}
                                                          className={active ? 'radio-button active' : 'radio-button'}>
                                                        <ReIcon icon="define" className="icon"/>
                                                    </span>
                                            <span>{item.text}</span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        {
                            !!~this.store.typeList.indexOf(1) &&
                            <div>
                                <p className="config-item-text">将定制馆配置到哪些用户</p>
                                {
                                    this.store.phoneList.map((item, index) => {
                                        return (
                                            <div key={index} className="config-phone-item">
                                                <span className="phone-text">手机号</span>
                                                <ReTextField
                                                    isLabel={false}
                                                    notfullWidth={true}
                                                    type="number"
                                                    className="phone-input"
                                                    onChange={(e, v) => this.store.phoneChange(v, item)}
                                                    errorText={'' ? 'error' : ''}
                                                    supportIntOnly={true}
                                                    value={item.phone}
                                                    maxLength={item.selectCountry.code === $$.SEM.CN_COUNTRY_CODE ? '11' : '15'}
                                                    placeholder={'请输入用户手机号'}>
                                                    <CountryCodeSelect
                                                        codeList={this.store.stores.Frame.countryCodeList}
                                                        currentSelect={item.selectCountry}
                                                        onChange={(selectItem) => this.store.selectCodeItem(selectItem, item)}/>
                                                </ReTextField>
                                                <p className="delete-item">
                                                    {
                                                        this.store.phoneList.length > 1 &&
                                                        <span className="delete-btn"
                                                              onClick={() => this.store.deleteItem(index)}>
                                                            <ReIcon icon="delete" className="icon"/>
                                                        </span>
                                                    }
                                                </p>
                                            </div>
                                        )
                                    })
                                }
                                <div className="config-phone-more">
                                    <p className="config-phone-btn" onClick={() => this.store.addCustomPhone()}>
                                    <span className="add-icon">
                                        <ReIcon icon="add_work" className="icon"/>
                                    </span>
                                        <span>配置多个用户请点击这里</span>
                                    </p>
                                </div>
                            </div>
                        }

                        <div className="button-wrapper">
                            <ReButton label={'确定'} className="button-confirm"
                                      onClick={() => this.store.confirmDialog()}/>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

    render() {

        return (
            <div className="orin-s-modelsconfig-root">
                {this.renderDialog()}
            </div>
        );
    }
}